<template>
  <div class="">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          ><i class="el-icon-lx-copy"></i> 我的消息</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-tabs v-model="message">
        <el-table :data="state.unread" :show-header="false" style="width: 100%">
          <el-table-column>
            <template #default="scope">
              <div class="display_flex">
                <img class="imghead" src="../assets/img/head_portrait.png" />
                <div>
                  <div>
                    【系统通知】 <span>{{ scope.row.createTime }}</span>
                  </div>
                  <div class="message-title">
                    {{
                      scope.row.type == 1
                        ? "实名认证"
                        : scope.row.type == 2
                        ? "林业申请"
                        : scope.row.type == 3
                        ? "第三方机构"
                        : scope.row.type == 4
                        ? "专家审核"
                        : scope.row.type == 5
                        ? "中环审核"
                        : "碳票签发"
                    }}：<span class="serial" @click="handledetail(scope.row)">
                      {{ scope.row.msg }}</span
                    >
                  </div>
                  <div
                    class="message-title"
                    v-if="scope.row.reason && scope.row.status == 0"
                  >
                    操作原因:{{ scope.row.reason }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tabs>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="seachfrom.pageNum"
        :page-size="seachfrom.pageSize"
        :total="pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 查看 -->
    <el-dialog v-model="editVisible" width="100%" :close-on-click-modal="false">
      <el-form>
        <el-form-item>
          <el-image src="../assets/img/bg-1.jpg"></el-image>
        </el-form-item>
      </el-form>
      <template #footer> </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import api from "../api/api";
export default {
  name: "tabs",
  setup() {
    const message = ref("first");
    const router = useRouter();
    const state = reactive({
      unread: [],
      read: [
        {
          date: "2018-04-19 20:00:00",
          title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
        },
      ],
      recycle: [
        {
          date: "2018-04-19 20:00:00",
          title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
        },
      ],
    });
    const seachfrom = reactive({
      pageNum: 1,
      pageSize: 10,
    });
    const pageTotal = ref(0);
    const getData = () => {
      api
        .postFormAPI("auth/client/account/msg/getList", seachfrom)
        .then((res) => {
          if (res.data.code == 1) {
            state.unread = res.data.data.list;
            pageTotal.value = res.data.data.total || 0;
          } else if (res.data.code == 401) {
            router.push("/login");
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .catch((err) => {});
    };
    getData();
    // 分页导航
    const handlePageChange = (val) => {
      seachfrom.pageNum = val;
      getData();
    };
    const handleRead = (index) => {
      const item = state.unread.splice(index, 1);
      console.log(item);
      state.read = item.concat(state.read);
    };
    const handleDel = (index) => {
      const item = state.read.splice(index, 1);
      state.recycle = item.concat(state.recycle);
    };
    const handleRestore = (index) => {
      const item = state.recycle.splice(index, 1);
      state.read = item.concat(state.read);
    };
    const editVisible = ref(false);
    const handledetail = (row) => {
      //林权
      if (row.type == 2) {
        router.push("/forestry_apply_for?id=" + row.relateId + "&type=1");
        // 碳票
      } else if (row.type == 6) {
        router.push("/Applyfor?applyId=" + row.relateId + "&type=1");
      }
      // editVisible.value = true;
    };
    return {
      seachfrom,
      message,
      state,
      editVisible,
      pageTotal,
      handlePageChange,
      handledetail,
      handleRead,
      handleDel,
      handleRestore,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.css";
.message-title {
  cursor: pointer;
}
.handle-row {
  margin-top: 30px;
}
.container {
  padding: 0;
  border-top: 1px solid #ddd;
}
.imghead {
  height: 60px;
  width: 60px;
  border-radius: 360px;
  margin-right: 20px;
}
.display_flex {
  width: 500px;
}
.message-title {
  color: #333;
}
.serial {
  color: #117e31;
}
&:deep(.el-dialog) {
  background: none;
  box-shadow: none;
}
&:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #909399;
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 360px;
  font-size: 30px;
}
&:deep(.el-form-item__content) {
  text-align: center;
}
</style>
